<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layout</title>
    <style>
        html *{
            padding: 0;
            margin: 0;
        }
        .box {
            margin: 10px 0;
        }
        .layout article div {
            min-height: 100px;
        }
        .left {
            height: 200px;
        }
        .right {
            height: 200px;
        }
    </style>
</head>
<body>
    <section class="layout float">
        <style media="screen">
            .layout.float .left {
                float: left;
                min-width: 300px;
                background: red;
            }
            .layout.layout.float .right {
                float: right;
                min-width: 300px;
                background: green;
            }
            .layout.float .content {
                background: pink;
            }
        </style>
        <article class="left-layout-content">
            <div class="left"></div>
            <div class="right"></div>
            <div class="content">
                <h1>浮动解决方案: float</h1>
            </div>
        </article>
    </section>
    <section class="layout position">
        <style>
            .layout.position .box {
                position: relative;
            }
            .layout.position .left {
                position: absolute;
                left: 0;
                width: 300px;
                background: red;
            }
            .layout.position .content {
                position: absolute;
                left: 300px;
                right: 300px;
                background: pink;
            }
            .layout.position .right {
                position: absolute;
                right: 0;
                width: 300px;
                background: green;
            }
        </style>
        <article class="box">
            <div class="left">1</div>
            <div class="content">position: absolute, relative</div>
            <div class="right">2</div>
        </article>
    </section>
    <section class="layout flex">
        <style>
            .layout.flex .box {
                display: flex;
                margin-top: 120px;
            }
            .layout.flex .left {
                width: 300px;
                background: red;
            }
            .layout.flex .content {
                flex: 1;
                background: pink;
            }
            .layout.flex .right {
                width: 300px;
                background: green;
            }
        </style>
        <article class="box">
            <div class="left">1</div>
            <div class="content">flex</div>
            <div class="right">2</div>
        </article>
    </section>
    <section class="layout table">
        <style>
            .layout.table .box {
                display: table;
                width: 100%; 
            }
            .layout.table .left {
                display: table-cell;
                width: 300px;
                background: red;
            }
            .layout.table .content {
                display: table-cell;
                background: pink;
            }
            .layout.table .right {
                display: table-cell;
                width: 300px;
                background: blue;
            }
        </style>
        <article class="box">
            <div class="left">1</div>
            <div class="content">table</div>
            <div class="right">2</div>
        </article>
    </section>
    <section class="layout grid">
        <style>
            .layout.grid .box {
                display: grid;
                grid-template-columns: 300px 1fr 300px;
            }
            .layout.grid .left {
                width: 300px;
                background: red;
            }
            .layout.grid .content {
                background: pink;
            }
            .layout.grid .right {
                width: 300px;
                background: blue;
            }
        </style>
        <article class="box">
            <div class="left">1</div>
            <div class="content">grid</div>
            <div class="right">2</div>
        </article>
    </section>
</body>
</html>